<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.ajax_get.html</title>


</head>
<body>
<div id="content">
</div>
<button id="btn">8.ajax_avoid_multiple_req.html</button>

<script>
    let btn = document.getElementById("btn");
    let content = document.getElementById("content");
    let xhr;
    let loading;
    btn.onclick=()=>{
        if (loading){
            //发起过请求就取消该请求
            xhr.abort();
        }
       // 若之前发送过请求，上面的if语句将请求取消之后这里重新创建一个xhr对象重新发请求
       xhr = new XMLHttpRequest();
        xhr.onreadystatechange =()=>{
            if (xhr.status === 4){
            }
        };
        xhr.open("get","./ajax_get");
        xhr.send();
        //发送完将loading状态置为true;
        loading = true;


    }



</script>
</body>
</html>